//@ts-ignore
import * as Vue from "vue";
import {
    computed,
    defineComponent,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
} from "vue";
//@ts-ignore
import { appvm } from "./appvm";
import { clicknextpagelink } from "./clicknextpagelink";
import { clickprevpagelink } from "./clickprevpagelink";
//@ts-ignore
import config from "./config";
//@ts-ignore
//@ts-ignore
import { eventtarget } from "./eventtarget";
import { getabsoluteindex, getabsolutecatalogue } from "./getbaseurl";
import { initloadingid } from "./mark-down-reader";
import { mymounted } from "./mymounted";
import { navigateclicklistener } from "./navigateclicklistener";
import { HashLink } from "./routerhashlink";
import { PathLink } from "./routerpathlink";
import { scrolltoactiveelements } from "./scrolltoactiveelements";
//@ts-ignore
import { scrolltobottom } from "./scrolltobottom.ts";
//@ts-ignore
import { scrolltotop } from "./scrolltotop.ts";
import { sidebarscroll } from "./sidebarscroll";
import { states } from "./states";
import { useHashParams } from "./useHashParams";
import { useinnerwidth } from "./useinnerwidth";
import { usemarkdownurl } from "./usemarkdownurl";
import { useobservesize } from "./useobservesize";
import { usePathParams } from "./usePathParams";

export default defineComponent({
    components: {
        RouterLink: (() => {
            if (process.env.PRERENDER) {
                return PathLink;
            } else {
                return HashLink;
            }
        })(),
    },
    setup() {
        const pathParams = usePathParams();
        const hashParams = useHashParams();
        const mdurl = usemarkdownurl();
        const indexactive = computed(() => {
            return (
                (process.env.PRERENDER
                    ? Object.keys(pathParams.value).length === 0
                    : Object.keys(hashParams.value).length === 0) ||
                mdurl.value === getabsoluteindex()
            );
        });
        const { width: leftbarwidth, ref: leftbarref } = useobservesize({});
        const { width: rightbarwidth, ref: rightbarref } = useobservesize({});
        const { height: navbarheight, ref: navbarref } = useobservesize({
            height: 60,
        });
        const mybody_143af32b9b8f396b798aeb8d4ee68ed9ca3 = ref();

        const contentcontainer_9ce8d13b9be97b46e89aeea8f242169cfa1 = ref();
        const Mysidebar_c41e47b3b3bbc85fdbb7dbba7d3a0743644 = ref();
        const innerwidth = useinnerwidth();
        const widescreen = computed(() => {
            return innerwidth.value > 550;
        });
        const narrowscreen = computed(() => {
            return !widescreen.value;
        });
        const largescreen = computed(() => {
            return innerwidth.value > 1000;
        });
        const middlescreen = computed(() => {
            return !largescreen.value;
        });
        const { pageerrors, cachetoc } = states;
        const sidebarrighthtml = computed(() => {
            return cachetoc.get(mdurl.value);
        });
        const data = reactive({
            catalogueurl: getabsolutecatalogue(),

            indexhref: getindexhref(),

            mytitle: getmytitle(),
            showerror: false,
            errorcontent: "",

            xianshicebianlan: window.innerWidth > 500,
            showload: true,
            showsidebarright: window.innerWidth > 500,
        });
        watch(
            () => data.showsidebarright,
            (showsidebarright) => {
                if (showsidebarright) {
                    scrolltoactiveelements();
                }
            }
        );
        watch(
            () => data.xianshicebianlan,
            (xianshicebianlan) => {
                if (xianshicebianlan) {
                    scrolltoactiveelements();
                }
            }
        );
        async function getsidebarele(): Promise<HTMLElement> {
            //子组件可能还没挂载完成
            let ele = Mysidebar_c41e47b3b3bbc85fdbb7dbba7d3a0743644.value;
            if (ele) {
                // console.log(ele);
                return ele;
            } else {
                // console.time("子组件挂载");
                return new Promise((res) => {
                    let stop = watch(
                        () =>
                            Mysidebar_c41e47b3b3bbc85fdbb7dbba7d3a0743644.value,
                        (value) => {
                            if (value) {
                                res(value);
                                stop();
                                // console.timeEnd("子组件挂载");
                            }
                        }
                    );
                });
            }
        }
        function sidebarinnerref(e: HTMLElement) {
            if (e) {
                Mysidebar_c41e47b3b3bbc85fdbb7dbba7d3a0743644.value = e;
                leftbarref(e);
            }
        }
        function togglesidebarright() {
            data.showsidebarright = !data.showsidebarright;
        }
        onMounted(() => {
            if (largescreen.value) {
                data.showsidebarright = true;
            }
        });

        function togglecebian() {
            //@ts-ignore
            data.xianshicebianlan = !data.xianshicebianlan;
        }

        const error = computed(() => {
            return pageerrors.get(data.catalogueurl);
        });
        const sidebarrightref = rightbarref;
        const left = computed(() => {
            if (innerwidth.value > 500) {
                return leftbarwidth.value;
            } else {
                return 0;
            }
        });
        const right = computed(() => {
            if (innerwidth.value > 500) {
                return rightbarwidth.value;
            } else {
                return 0;
            }
        });

        const repository = config.repository;
        const allret = {
            repository,
            sidebarrighthtml,
            error,
            navigateclicklistener: navigateclicklistener,
            scrolltotop,
            scrolltobottom,
            togglesidebarright,
            togglecebian,
            sidebarinnerref,
            getsidebarele,
            largescreen,
            middlescreen,

            widescreen,
            narrowscreen,
            contentcontainer_9ce8d13b9be97b46e89aeea8f242169cfa1,
            indexactive,
            mybody_143af32b9b8f396b798aeb8d4ee68ed9ca3,
            Mysidebar_c41e47b3b3bbc85fdbb7dbba7d3a0743644,
            ...toRefs(data),
            navbarheight,
            sidebarrightref,
            navbarref,
            right,
            left,
            clickprevpagelink,
            clicknextpagelink,
        };

        return allret;
    },

    async mounted() {
        console.log(this);

        this.indexhref = getindexhref();

        this.mytitle = getmytitle();
        this.repository = config.repository;
        appvm.value = this;
        await Vue.nextTick();

        // this.$el.id = "app";
        requestAnimationFrame(() => {
            eventtarget.dispatchEvent(new Event("mount"));
        });
        this.catalogueurl = getabsolutecatalogue();
        var initloadele = document.getElementById(initloadingid);
        if (initloadele) {
            initloadele.style.display = "none";
            initloadele?.remove();
        }
        return await mymounted();
    },
    watch: {
        async xianshicebianlan(value) {
            await Vue.nextTick();
            // Adjustthedistance();
            if (value) {
                sidebarscroll();
            }
        },
        async largescreen(value) {
            await Vue.nextTick();
            if (value) {
                this.xianshicebianlan = true;
            }
        },
    },
});
function getindexhref() {
    // if (process.env.PRERENDER) {
    return { md: getabsoluteindex() };
    // } else {
    //     return String(
    //         Object.assign(new URL(location.href), {
    //             hash: getabsoluteindex(),
    //         })
    //     );
    // }
}
function getmytitle() {
    return config.maintitle;
}
